<template>
    <FilterHeader @search="handleSearch"></FilterHeader>
    <div class="container">
        <h1>我的报告</h1>
        <div class="tabs">
            <div v-for="item in tabs" :key="item.id" :class="['tab', { 'active': queryParms.category_id === item.id }]"
                @click="selectTab(item.id)">
                {{ item.name }}
                <span class="underline"></span>
            </div>
            <div class="icon" @click="changeArrow">
                展开
                <ArrowDownBold :class="['arrow', { collapse: arrowStatus === 'collapse' }]" style="width: 10px;" />
            </div>
        </div>
        <div class="list">
            <CommonCard @edit="edit" v-for="item in templateList" :item="item" :key="item.id"></CommonCard>
            <el-empty v-if="!templateList.length" :image-size="100" description="暂无数据"
                style="margin: 0 auto;margin-top: 100px;" />
        </div>
        <div class="pagination">
            <el-pagination background layout="prev, pager, next" :total="total" hide-on-single-page />
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, onActivated, onDeactivated } from 'vue'
import FilterHeader from '@/components/FilterHeader.vue';
import CommonCard from '@/components/CommonCard.vue';
import request from '@/request';
import { useRouter } from 'vue-router';
const router = useRouter();
const tabs = ref([

])
const total = ref(1)

const templateList = ref([])
const queryParms = ref({
    category_id: '',
    keywords: '',
    page: 1,
    limit: 10,
})
onActivated(() => {
    // 调用时机为首次挂载
    console.log('我被激活了');
    // 以及每次从缓存中被重新插入时
})

onDeactivated(() => {
    // 在从 DOM 上移除、进入缓存
    console.log('我被移除了');
    // 以及组件卸载时调用
})
onMounted(async () => {
    console.log('我被挂载了');
    await getCategoryTableList();
    getMyTemplateList();
})
const edit = (data) => {
    router.push({
        path: '/reportDetail',
        query: {
            templateId: data.id,
            name: data.name,
            reportId: data.datas && data.datas.id
        }
    });
}
const changeArrow = () => {
    arrowStatus.value = arrowStatus.value === "expand" ? "collapse" : "expand";
};
// 获取分类列表
const getCategoryTableList = async () => {
    const res = await request.get('/api/master/from/category');
    if (res.code == 1) {
        tabs.value = res.data;
        queryParms.value.category_id = res.data[0].id;
    }
}
// 获取我的模板列表
const getMyTemplateList = async () => {
    const res = await request.post('/api/master/template/my_list', queryParms.value);
    if (res.code == 1) {
        templateList.value = res.rows;
        total.value = res.total;
    }
};
// 搜索
const handleSearch = (keyword) => {
    queryParms.value.keywords = keyword;
    getMyTemplateList();
}
// 切换tab
const selectTab = (id) => {
    queryParms.value.category_id = id;
    getMyTemplateList();
}

</script>

<style lang="less" scoped>
.container {
    // background: linear-gradient(135deg, #E6E8FA 0%,  #E0EDF8 100%);
    // background-color: rgb(236, 238, 240);
    background-color: #f1f1fa;
    height: calc(100vh - 80px);
    padding: 0 40px;
    overflow: hidden;
}

h1 {
    font-weight: bold;
    font-size: 20px;
    color: #333;
    margin: 46px 0 30px 0;
}

.tabs {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
    border-bottom: solid #DEDDF1 1px;
    padding-bottom: 22px;
}

.tab {
    cursor: pointer;
    font-size: 16px;
    color: #333;
    position: relative;
    transition: all 0.3s ease;
    height: 22px;

    &:hover {
        color: #2D53F8;
    }

    &.active {
        color: #2D53F8;
        //    transform: scale(1.05);

        font-size: 18px;
        box-sizing: border-box;
        font-weight: bold;
        // animation: textGlow 1s infinite alternate;
    }
}

.icon {
    cursor: pointer;
    height: 17px;
    font-family: FZLTHK--GBK1, FZLTHK--GBK1;
    font-weight: normal;
    font-size: 14px;
    color: #2d53f8;
    line-height: 17px;
    letter-spacing: 1px;
    text-align: left;
    font-style: normal;
    display: flex;
    gap: 11px;
    align-items: center;
    margin-left: auto;

    .arrow {
        transition: 0.1s;

        &.collapse {
            transform: rotate(180deg);
        }
    }
}

.list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    gap: 20px;
}

.pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

@keyframes textGlow {
    0% {
        text-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    }

    50% {
        text-shadow: 0 0 15px rgba(0, 123, 255, 0.6);
    }

    100% {
        text-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    }
}

/* 悬浮渐变背景动画 */
@keyframes cardHover {
    0% {
        background: linear-gradient(135deg, #FFFFFF, #F0F4FF);
    }

    50% {
        background: linear-gradient(135deg, #F0F4FF, #E6E8FA);
    }

    100% {
        background: linear-gradient(135deg, #E6E8FA, #FFFFFF);
    }
}

/* 粒子特效 */
.tab.active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: rgba(0, 123, 255, 0.5);
    border-radius: 50%;
    animation: particle 0.8s ease-out forwards;
}

@keyframes particle {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(3);
        opacity: 0;
    }
}
</style>